<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns:range="http://www.w3.org/1999/xhtml">
<head xmlns:th="http://www.thymeleaf.org">
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery-3.7.1.min.js"></script>
    <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">
    <style>
        .error{
            color: #ff0000;
        }
    </style>

</head>
<body>
<div class="container-fluid">
<!--    这是最基本的页面！-->
    <!-- Button trigger modal -->
    <h3 style="display: inline-block">操作：</h3>
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" onclick="preAdd();">
        新增学生
    </button>
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1" onclick="findByName()">
        查询
    </button>

    <form class="form-inline">
        <div class="form-group">
            <label for="searchName">请输入名字</label>
            <input type="text" class="form-control" id="searchName" placeholder="searchName">
        </div>

        <button type="button" class="btn btn-default btn-primary" onclick="search()">查询</button>
    </form>


    <table class="table table-bordered table table-hover" id="stuTable">
    </table>
</div>

<!--查询模态框-->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
    <div class="modal-dialog" role="document">
        <div class="modal-content" style="height: 500px;">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">按姓名查询</h4>
            </div>

            <div id="nav" >
                <div><br></div>
                <div><input type="text" id="UserName" placeholder="请输入姓名......" style="width: 399px;height: 33px;float: left;margin: 0 3px;"  />
                    <button type="button" value="查询" class="btn btn-primary "  onclick="findByName();">查询 </button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" >关闭</button></div>
                <div><br></div>
                <table class="table table-bordered table table-hover" >
                    <thead>
                    <tr >
                        <th class="success" style="text-align: center">序号</th>
                        <th class="info" style="text-align: center">学号</th>
                        <th class="info" style="text-align: center">姓名</th>
                        <th class="info" style="text-align: center">性别</th>
                        <th class="info" style="text-align: center">年龄</th>
                        <th class="info" style="text-align: center">成绩</th>
                        <th class="info" style="width: 100px;text-align: center">操作</th>
                    </tr>
                    </thead>
                    <tbody id="studentTb">

                    </tbody>
                </table>
            </div>

            <div class="modal-footer">
<!--                                <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>-->
                <!--                <button type="button" value="查询" class="btn btn-primary" onclick="findByName();">查询 </button>-->
            </div>
        </div>
    </div>
</div>


<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">学生信息</h4>
            </div>
                <!--                表单-->
                <form id="formStudent">
                    <div class="modal-body">
                    <input hidden="hidden" id="id" name="id"/>
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" class="form-control" id="name"  name="name" placeholder="姓名" required minlength="2" maxlength="10">
                    </div>
                    <div class="form-group">
                        <label for="no">学号</label>
                        <input type="text" class="form-control" id="no"  name="no" placeholder="学号" required minlength="10" maxlength="10">
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" class="form-control" id="password" name="password" placeholder="密码" required minlength="6" maxlength="6">
                    </div>
                    <div class="form-group">
                        <label for="sex">性别:</label>
                        <select class="form-control" id="sex" name="sex">
                            <option value="1">男</option>
                            <option value="2">女</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="age">年龄</label>
                        <input type="text" class="form-control" id="age"  name="age" placeholder="年龄" required range:[16,30]>
                    </div>
                    <div class="form-group">
                        <label for="score">成绩</label>
                        <input type="text" class="form-control" id="score"  name="score" placeholder="成绩" required range:[0,100]>
                    </div>
            </div>
            <div class="modal-footer">
<!--                <button type="button" class="btn btn-primary" onclick="saveStudent();">保存</button>-->
                <button type="submit" class="btn btn-primary">提交更改</button>
            </div>
                </form>
            <!--                表单结束-->
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<script src="/js/bootstrap.min.js"></script>
<script src="/plugins/bootstraptable/bootstrap-table.min.js"></script>
<script src="/plugins/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/plugins/jqvalidate/jquery.validate.min.js"></script>
<script src="/plugins/jqvalidate/localization/messages_zh.min.js"></script>

<script type="text/javascript">

    function search() {

        $("#stuTable").bootstrapTable("destroy");
        loadTable();
    }

    function preAdd(){
        $("id").val(0);//提示新增
    }

    //新增或者更新都可以
    function saveStudent(){
        var data=$("#formStudent").serialize();

        var id=$("#id").val();

        if(id<1){
            //是新增
            $.ajax({
                url: "/webapi/student/insert",
                method: "post",
                data: data

            }).done(function (){
                loadTable();
                $('#myModal').modal('hide')

            })

        }else{
            //是更新
            $.ajax({
                url: "/webapi/student/update",
                method: "put",
                data: data

            }).done(function (){
                loadTable();
                $('#myModal').modal('hide')

            })
        }
    }

    function editStudent(id){
        $('#myModal').modal('show');
        $.ajax({
            url:'/webapi/student/get/'+id
        }).done(function (rs) {
            $("#id").val(rs.id);
            $("#name").val(rs.name);
            $("#no").val(rs.no);
            $("#password").val("");
            $("#sex").val(rs.sex);
            $("#age").val(rs.age);
            $("#score").val(rs.score);
        })

    }

    function deleteStudent(id){
        if (confirm("你是否真的要删除吗？别后悔哟！")){
            $.ajax({
                url:'/webapi/student/delete/'+id,
                method:"delete"
            }).done(function (){
                loadTable();

            });

        }//end if

    }

    // 根据学生姓名查找
    function findByName(){
        var data=$("#UserName").val();
        $.ajax({
            url:"/webapi/student/name",
            method:"get",
            data: {name:data.toString()},
        }).done(function (rs){
            //取出来放在rs
            var len=rs.length;
            var html="";
            var sex=["未知","男","女"];
            for (var i=0;i<len;i++){
                var item=rs[i];
                html+="<tr>"
                    +"<td class=\"danger\" style=\"text-align: center\">"+item.id+"</td>"
                    +"<td class=\"active\" style=\"text-align: center\">"+item.name+"</td>"
                    +"<td class=\"active\" style=\"text-align: center\">"+sex[item.sex]+"</td>"
                    +"<td class=\"active\" style=\"text-align: center\">"+item.score+"</td>"
                    +"<td class=\"active\" style=\"text-align: center\"><a href='#' onclick='editStudent("+item.id+");'>编辑</a> " +
                    "<a href='#' onclick='deleteStudent("+item.id+")'>删除</a> </td>"
                    +"</tr>";
            }
            $("#studentTb").html(html);
        });
    }

    function loadTable(){
        $("#formStudent").validate({
            submitHandler:saveStudent
        });
        $('#stuTable').bootstrapTable({
            url: '/webapi/student/getbypage',
            striped:true,//隔行变色效果
            pagination:true,//底部显示分页条
            singleSelect: false,//设置true会禁止多选
            pageSize:3,//如果设置了分页，每页数据条数
            pageNumber:1,//首页页码
            showRefresh: true, //是否显示刷新按钮
            sidePagination: "server",//设置在哪里分页，可选值为client或者server
            queryParams:function (parmas) {
                var para0bj={
                    size: parmas.limit,
                    page:parmas.offset/ parmas.limit,
                    sort:"id",
                    direct:"desc",
                    name: $("#searchName").val()
                };
                return para0bj;
            },
            //表格样式
            theadClasses: "bg-success",
            rowStyle:function(row, index) {
                if (index>=0){
                    return {
                        classes: "warning",
                    };
                }
                return {};
            },

            columns: [{
                field: 'id',
                title: '序号',
                align: 'center'

            },{
                field: 'no',
                title: '学号',
                align: 'center'

            }, {
                field: 'name',
                title: '姓名',
                align: 'center'
            }, {
                field: 'sex',
                title: '性别',
                formatter : function (value, row, index) {
                    if (row.sex === 0) {
                        return '未知';
                    }
                    if (row.sex === 1) {
                        return '男';
                    }
                    if (row.sex === 2) {
                        return '女';
                    }
                    return value;
                },
                align: 'center'
            },{
                field: 'age',
                title: '年龄',
                align: 'center'

            }, {
                field: 'score',
                title: '成绩',
                align: 'center',
            },{
                title: "操作",
                align: 'center',
                valign: 'middle',
                width: 160, // 定义列的宽度，单位为像素px
                formatter: function (value, row, index) {   //传入数据
                    return '<button class="btn btn-primary btn-sm" onclick="editStudent(\'' + row.id + '\')">编辑</button> <button class="btn btn-primary btn-sm" onclick="deleteStudent(\'' + row.id + '\')">删除</button>';
                }
            },]
        })



    }//end of loadTable
    $(function(){
        loadTable();

    });
</script>
</body>
</html>